<template>
    <div class="release-page">
        <app-head></app-head>
        <app-body>
            <div class="release-container">
                <div class="release-header">
                    <h2>发布闲置物品</h2>
                    <p>填写详细信息，让您的物品更快卖出</p>
                </div>
                
                <div class="release-form">
                    <!-- 物品名称 -->
                    <div class="form-section">
                        <label class="form-label">物品名称</label>
                        <el-input 
                            placeholder="请输入二手物品名称" 
                            v-model="idleItemInfo.idleName"
                            maxlength="30"
                            show-word-limit
                            class="form-input">
                        </el-input>
                    </div>

                    <!-- 成色选择 -->
                    <div class="form-section">
                        <label class="form-label">物品成色</label>
                        <el-select 
                            v-model="idleItemInfo.idleCondition" 
                            placeholder="请选择成色"
                            class="form-input">
                            <el-option
                                v-for="item in conditionOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>

                    <!-- 物品描述 -->
                    <div class="form-section">
                        <label class="form-label">物品描述</label>
                        <el-input
                            type="textarea"
                            :rows="4"
                            placeholder="请输入物品的详细介绍..."
                            v-model="idleItemInfo.idleDetails"
                            maxlength="1000"
                            show-word-limit
                            class="form-textarea">
                        </el-input>
                    </div>

                    <!-- 位置信息 -->
                    <div class="form-section">
                        <label class="form-label">物品位置</label>
                        <div class="location-container">
                            <div class="location-select">
                                <el-cascader
                                    :options="options"
                                    v-model="selectedOptions"
                                    @change="handleChange"
                                    :separator="' '"
                                    placeholder="选择省市区"
                                    class="location-cascader">
                                </el-cascader>
                            </div>
                            <div class="location-input">
                                <el-input 
                                    v-model="positionData"
                                    maxlength="50"
                                    placeholder="或直接输入详细地址"
                                    show-word-limit>
                                </el-input>
                            </div>
                            <div class="location-map" @click="NowPosition">
                                <el-tooltip content="获取当前位置" placement="top">
                                    <img src="../../assets/position.png" alt="定位" class="map-icon">
                                </el-tooltip>
                            </div>
                        </div>
                    </div>

                    <!-- 类别和价格 -->
                    <div class="form-row">
                        <div class="form-section">
                            <label class="form-label">物品类别</label>
                            <el-cascader
                                v-model="idleItemInfo.idleLabelDetails"
                                :options="options2"
                                placeholder="请选择类别"
                                :props="{ emitPath: false, expandTrigger: 'hover' }"
                                clearable
                                class="form-input">
                            </el-cascader>
                        </div>
                        
                        <div class="form-section">
                            <label class="form-label">价格</label>
                            <el-input-number 
                                v-model="idleItemInfo.idlePrice" 
                                :precision="2" 
                                :step="10" 
                                :max="10000000" 
                                :min="0"
                                class="price-input">
                                <template slot="prefix">¥</template>
                            </el-input-number>
                        </div>
                    </div>

                    <!-- 图片上传 -->
                    <div class="form-section">
                        <label class="form-label">上传图片</label>
                        <div class="upload-container">
                            <el-upload
                                action="http://localhost:8080/file/upload"
                          
                                :on-remove="fileHandleRemove"
                                :on-success="fileHandleSuccess"
                                :show-file-list="false"
                                :limit="10"
                                :on-exceed="handleExceed"
                                accept="image/*"
                                list-type="picture-card"
                                :file-list="fileList"
                                class="image-uploader">
                                <i class="el-icon-plus"></i>
                                <div class="upload-tip">最多10张图片</div>
                            </el-upload>
                            
                            <div class="image-preview">
                                <div class="image-item" v-for="(img, index) in imgList" :key="index">
                                    <el-image 
                                        :src="img" 
                                        fit="cover"
                                        :preview-src-list="imgList">
                                        <div slot="error" class="image-error">
                                            <i class="el-icon-picture-outline"></i>
                                        </div>
                                    </el-image>
                                    <div class="image-actions">
                                        <i class="el-icon-zoom-in" @click="previewImage(img)"></i>
                                        <i class="el-icon-delete" @click="removeImage(index)"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 提交按钮 -->
                    <div class="form-actions">
                        <el-button 
                            type="primary" 
                            round 
                            @click="releaseButton"
                            class="submit-btn">
                            确认
                        </el-button>
                    </div>
                </div>
            </div>
        </app-body>
    </div>
</template>

<script>
import AppHead from '../common/AppHeader.vue';
import AppBody from '../common/AppPageBody.vue'
import AppFoot from '../common/AppFoot.vue'
import options from '../common/country-data.js'

export default {
    name: "release",
    components: {
        AppHead,
        AppBody,
        AppFoot
    },
    data() {
        return {
            fileList: [],
            positionData: '',
            lat: '',
            lng: '',
            showFileList: true,
            options: options,
            selectedOptions: [],
            options2: [
                        
                        {
                          value: '1',
                          label: '数码',
                          children: [
                            { value: '101', label: '手机' },
                            { value: '102', label: '平板电脑' },
                            { value: '103', label: '笔记本电脑' },
                            { value: '104', label: '相机' },
                            { value: '105', label: '数码配件' },
                            { value: '106', label: '智能设备' },
                            { value: '107', label: '办公设备' },
                            { value: '108', label: '网络设备' },
                            { value: '109', label: '影音数码' }
                          ]
                        },
                        {
                          value: '2',
                          label: '服饰',
                          children: [
                            { value: '201', label: '女装' },
                            { value: '202', label: '女鞋' },
                            { value: '203', label: '男装' },
                            { value: '204', label: '男鞋' },
                            { value: '205', label: '箱包手表' },
                            { value: '206', label: '配件' },
                            { value: '207', label: '运动服饰' },
                            { value: '208', label: '首饰' } 
                          ]
                        },
                        {
                          value: '3',
                          label: '技能',
                          children: [
                            { value: '301', label: '定制设计' },
                            { value: '302', label: '技能学习' },
                            { value: '303', label: '餐饮美食' }
                          ]
                        },
                        {
                          value: '4',
                          label: '服务',
                          children: [
                            { value: '401', label: '跑腿服务' },
                            { value: '402', label: '上门回收' }
                          ]
                        },
                        {
                          value: '5',
                          label: '美妆',
                          children: [
                            { value: '501', label: '彩妆' },
                            { value: '502', label: '护肤' },
                            { value: '503', label: '香水' }
                          ]
                        },
                        {
                          value: '6',
                          label: '玩具',
                          children: [
                            { value: '601', label: '玩具' },
                            { value: '602', label: '手办' }
                          ]
                        },
                        {
                          value: '7',
                          label: '食品',
                          children: [
                            { value: '701', label: '粮油米面' },
                            { value: '702', label: '酒水' },
                            { value: '703', label: '休闲食品' },
                            { value: '704', label: '饮料' },
                            { value: '705', label: '水果' },
                            { value: '706', label: '茶' }
                          ]
                        },
                        {
                          value: '8',
                          label: '图书',
                          children: [
                            { value: '801', label: '图书期刊' },
                            { value: '802', label: '文化用品' },
                            { value: '803', label: '游戏类' },
                            { value: '804', label: '游戏交易' },
                            { value: '805', label: '音像CD' }
                          ]
                        },
                        {
                          value: '9',
                          label: '其他',
                          children: [
                            { value: '901', label: '其他用品' }
                          ]
                        }
                      ],
            imgList: [],
            idleItemInfo: {
                idleName: '',
                idleDetails: '',
                pictureList: '',
                idlePrice: 0,
                idlePlace: '',
                idleLabel: '',
                idleLabelDetails: ''
            },
            conditionOptions: [
                { value: '99新', label: '99新(全新包装，未使用过)' },
                { value: '95新', label: '95新(包装都还在，仅试用)' },
                { value: '9成新', label: '9成新(仅轻微使用过几次)' },
                { value: '8成新', label: '8成新(使用过，但几乎无痕迹，且包装还在)' },
                { value: '7成新', label: '7成新(有明显使用痕迹)' },
                { value: '5成新', label: '5成新(有明显划痕或有损伤)' }
            ],
        };
    },
    methods: {
        handleChange(value) {
            this.idleItemInfo.idlePlace = value[0] + value[1];
        },
        fileHandleRemove(file, fileList) {
            this.imgList = this.imgList.filter(img => img !== file.response.data);
        },
        previewImage(img) {
            this.$previewImages(this.imgList, this.imgList.indexOf(img));
        },
        removeImage(index) {
            this.imgList.splice(index, 1);
        },
        fileHandleSuccess(response, file, fileList) {
            this.imgList.push(response.data);
        },
        NowPosition() {
            this.$api.NowPosition().then(response => {
                if (response.data && response.data.status === 0) {
                    const province = response.data.content.address_detail.province;
                    const city = response.data.content.address_detail.city;
                    this.positionData = `${province} ${city}`;
                    this.$message.success("位置获取成功");
                } else {
                    this.$message.error("获取位置失败：" + response.data.message);
                }
            })
        },
        releaseButton() {
            this.idleItemInfo.pictureList = JSON.stringify(this.imgList);
            if (this.positionData) {
                this.idleItemInfo.idlePlace = this.positionData;
            }
            this.idleItemInfo.idleLabel = this.idleItemInfo.idleLabelDetails[0];

            if (this.validateForm()) {
                this.$api.addIdleItem(this.idleItemInfo).then(res => {
                    if (res.status_code === 1) {
                        this.$message.success('发布成功！');
                        this.$router.replace({ path: '/details', query: { id: res.data.id } });
                    } else {
                        this.$message.error('发布失败！' + res.msg);
                    }
                }).catch(e => {
                    this.$message.error('发布出错，请稍后再试');
                })
            }
        },
        validateForm() {
            const requiredFields = [
                { field: 'idleName', message: '请输入物品名称' },
                { field: 'idleDetails', message: '请输入物品描述' },
                { field: 'idleLabelDetails', message: '请选择物品类别' },
                { field: 'idleCondition', message: '请选择物品成色' },
                { field: 'idlePrice', message: '请输入物品价格' }
            ];
            
            for (const { field, message } of requiredFields) {
                if (!this.idleItemInfo[field]) {
                    this.$message.error(message);
                    return false;
                }
            }
            
            if (this.imgList.length === 0) {
                this.$message.error('请至少上传一张图片');
                return false;
            }
            
            return true;
        },
        handleExceed(files, fileList) {
            this.$message.warning(`最多上传10张图片，您已上传${fileList.length}张`);
        },
    }
}
</script>

<style scoped>
/* 全局样式 */
:root {
  --primary-color: #ff5500;
  --primary-light: #ff7733;
  --text-color: #333;
  --text-light: #666;
  --border-color: #e0e0e0;
  --bg-color: #f8f8f8;
}

.release-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 发布容器 */
.release-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* 头部样式 */
.release-header {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.release-header h2 {
  font-size: 24px;
  color: var(--text-color);
  margin-bottom: 8px;
}

.release-header p {
  font-size: 14px;
  color: var(--text-light);
}

/* 表单样式 */
.form-section {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-size: 14px;
  color: var(--text-color);
  margin-bottom: 8px;
  font-weight: 500;
}

.form-input {
  width: 100%;
}

.form-textarea >>> .el-textarea__inner {
  min-height: 120px !important;
}

/* 位置信息 */
.location-container {
  display: flex;
  gap: 10px;
  align-items: center;
}

.location-select {
  flex: 1;
}

.location-input {
  flex: 2;
}

.location-map {
  flex: 0 0 40px;
  text-align: center;
}

.map-icon {
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: transform 0.2s;
}

.map-icon:hover {
  transform: scale(1.1);
}

/* 行布局 */
.form-row {
  display: flex;
  gap: 20px;
}

.form-row .form-section {
  flex: 1;
}

/* 价格输入 */
.price-input {
  width: 100%;
}

.price-input >>> .el-input__inner {
  padding-left: 30px;
}

/* 图片上传 */
.upload-container {
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  padding: 20px;
}

.image-uploader >>> .el-upload {
  width: 100%;
  border: 1px dashed var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

.image-uploader >>> .el-upload:hover {
  border-color: var(--primary-color);
}

.upload-tip {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 8px;
}

.image-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.image-item {
  position: relative;
  height: 120px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.image-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.image-item .el-image {
  width: 100%;
  height: 100%;
}

.image-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  opacity: 0;
  transition: opacity 0.3s;
}

.image-item:hover .image-actions {
  opacity: 1;
}

.image-actions i {
  color: white;
  cursor: pointer;
  font-size: 16px;
}

.image-actions i:hover {
  color: var(--primary-light);
}

.image-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #f5f5f5;
  color: #999;
}

/* 提交按钮 */
.form-actions {
    text-align: center;
  margin-top: 20px;
}

.submit-btn {
    background-color: var(--primary-color) !important;
  color: rgb(6, 6, 6) ;
  padding: 10px 30px;
  font-size: 16px;
}

.submit-btn:hover {
    padding: 10px 30px;
  font-size: 16px;
  background: var(--primary-light);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .release-container {
    padding: 15px;
  }
  
  .form-row {
    flex-direction: column;
    gap: 15px;
  }
  
  .location-container {
    flex-direction: column;
  }
  
  .location-select,
  .location-input {
    width: 100%;
  }
  
  .image-preview {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>